<template>
  <el-table class="table_box" :height="tabH" :style="{ width: '100%', height: tabH }" id="tableRef" :data="tableData" stripe
    :header-cell-style="{ background: '#fafafa', color: '#909399' }">
    <el-table-column width="100">
      <template #default="scope">
        <img class="img_icon" src="@/assets/customer/sort-icon.png" alt="" />
      </template>
    </el-table-column>
    <el-table-column prop="name" label="原因名称" />
    <el-table-column prop="type_name" label="原因类型"> </el-table-column>
    <el-table-column prop="address" label="状态">
      <template #default="scope">
        <el-switch v-model="scope.row.state" @click="onStatus(scope.row)" :active-value="2" :inactive-value="1" /> <span style="margin-left: 10px">{{
              scope.row.state_name
          }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="address" label="操作" fixed="right" width="200">
      <template #default="scope">
        <template v-if="scope.row.type != 1">
          <el-button size="small" @click="onEdit(scope.row)">编辑</el-button>
          <el-button size="small" @click="onDelete(scope.row)">删除</el-button>
        </template>
        <div v-else>--</div>
      </template>
    </el-table-column>
    <template #empty>
      <div class="empty">
        <img class="empty_img" src="@/assets/noData.png" alt="" />
        <div>暂无数据</div>
      </div>
    </template>
  </el-table>
  <ZWDeletdialog ref="DeletdialogRef" @submit="handleDel" />
</template>

<script setup lang="ts">
import ZWDeletdialog from '@/components/ZWDeletdialog.vue'
import { loseStatus } from '@/api/salesleads/salesmanagement/business'
import Sortable from 'sortablejs'
import { withDefaults, defineProps, ref, nextTick, defineExpose, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { tableH, reSize } from '@/utils/utils'
import bus from '@/utils/bus'
interface Props {
  tableData: any
}
const tabH = ref('500px')
const props = withDefaults(defineProps<Props>(), {
  tableData: () => []
})
const emit = defineEmits(['submit'])
const activeData = ref(0)
const DeletdialogRef = ref<any>()
const onStatus = (row: any) => {
  loseStatus({ id: row.id, state: row.state }).then((res: any) => {
    ElMessage.success(`${row.state == 2 ? '开启' : '关闭'}成功`)
  })
}
const onDelete = (row: any) => {
  DeletdialogRef.value.appDialog.title = '删除提醒'
  DeletdialogRef.value.content = '删除后，关联输单的商机其输单原因将会被置为【其他】原因。您确定要删除【输单原因名称】吗？'
  DeletdialogRef.value.appDialog.visible = true
  activeData.value = row
}
const handleDel = () => {
  emit('submit', 'DELETE', activeData.value)
}
const onEdit = (row: any) => {
  emit('submit', 'EDIT', row)
}

// 排序的方法
const setSortableFun = () => {
  let nowIndex
  let copyTableList
  nextTick(() => {
    let SortableBox = new Sortable(document.querySelector('#tableRef').querySelector('.el-table__body-wrapper tbody'), {
      animation: 100,
      sort: true,
      delay: 0,
      delayOnTouchOnly: false,
      // handle: '.img_icon', // 制定拖拽手柄
      onChoose: function (evt: any) {
        nowIndex = evt.oldIndex
        console.log(evt.oldIndex)
      },
      onEnd: (evt: any) => {
        copyTableList = JSON.parse(JSON.stringify(props.tableData))
        const data = copyTableList.splice(evt.oldIndex, 1)[0]
        copyTableList.splice(evt.newIndex, 0, data)
        let next_id, pre_id
        if (copyTableList[evt.newIndex - 1]) {
          pre_id = copyTableList[evt.newIndex - 1].source_id
        }
        if (copyTableList[evt.newIndex + 1]) {
          next_id = copyTableList[evt.newIndex + 1].source_id
        }
        let arr: any = []
        copyTableList.forEach((item: any, index: number) => {
          arr.push(item.id)
        })
        console.log(evt, '----------------')
        console.log(evt.oldIndex, '元素在旧父级中的旧索引')
        console.log(evt.newIndex, '元素在新父级中的新索引')
        console.log(evt.oldDraggableIndex, '元素在旧父级中的旧索引，仅计数可拖动的元素')
        console.log(evt.newDraggableIndex, '元素在新父级中的新索引，仅计数可拖动元素')
        if (evt.oldIndex != evt.newIndex) {
          emit('submit', 'STORT', arr)
        }
      }
    })
  })
}
defineExpose({
  setSortableFun
})
// 表格的自适应高度
const getTableH = () => {
  const h = parseInt(tableH('.table_box'))
  tabH.value = h - 230 + 'px'
  console.log('tabH.value: ', tabH.value);
}
bus.on('getTableH', getTableH)
onMounted(() => {
  reSize(getTableH)
  // getTableH()
})
</script>

<style lang="scss" scoped>
.switch {
  position: relative;

  .switch_msk {
    width: 42px;
    height: 22px;
    position: absolute;
    top: 0;
    cursor: pointer;
  }
}

.empty {
  margin: 100px 0;

  .empty_img {
    transform: translateX(13%);
  }
}

.img_icon {
  width: 20px;
}

.el-button {
  margin-bottom: -8px;
  text-align: left;
  overflow: hidden;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  width: 80px;
  height: 24px;
  margin: 0 4px 8px;
  border: 1px solid #eaeaea;
  border-radius: 2px;
  text-align: center;
  background: #fff;
}
</style>
